<template>
  <div class="search__history">
    <div class="search__history--title">
      <span>历史记录</span>
      <i class="iconfont icon-lajitong1" @click="delSearchHistory"></i>
    </div>
    <div class="search__history--content" @click="selected">
      <span class="search__history--item" v-for="(item,index) in searchHistory" :key="index">
        {{item}}
      </span>
    </div>
  </div>
</template>
<script setup>
import { defineEmits,defineProps } from "vue";
defineProps({
  searchHistory:Array
})
const emits = defineEmits(['del-search-history','to-history'])
const delSearchHistory = () => {
  emits('del-search-history')
}
const selected = (e) =>{
  emits('to-history',e.target.innerHTML)
}
</script>
<style lang="stylus">
.search__history--title
  display flex
  justify-content space-between
  font-size 14px
  font-weight 500
.search__history--content
  margin-top 10px
  display flex
  align-items center
  flex-wrap wrap
  .search__history--item
    background rgba(216,216,216,0.251)
    border-radius 15px
    padding 7px 7px
    font-size 14px
    font-weight 400
    margin-right 5px
    margin-bottom 5px
</style>